<template>
	<view class="content" style="">
		<view class="box" style="" v-if="deliveryName">
			<view class="box-left" :style="{ background: templateConfig.page.themeColor }">
				<image style="width: 80rpx;height: 70rpx;" src="../../static/images/kuaidi.png" mode=""></image>
			</view>
			<view class="box-right" style="vertical-align: top;">
				<view class="box-right-one">
					<view class="left-one">
						快递公司:
					</view>
					<view class="right-one">
						{{ deliveryName }}
					</view>
				</view>
				
				<view class="box-right-one" :style="{ color: templateConfig.page.themeColor }">
					<view class="left-one">
						快递单号:
					</view>
					<view class="right-one">
						{{ waybillId }}
						
						<view class="copy" :style="{ background: templateConfig.page.themeColor }">
							<text style="color: #fff" @click="copy(waybillId)">复制</text>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="box-content" >
			
			<scroll-view scroll-y="true" class="scrollPopup">
				<view class="box-list">
					
					<u-steps current="0" direction="column" :activeColor="templateConfig.page.themeColor">
						<u-steps-item
							:title="item.action_msg"
							:desc="item.action_time | dateFormat"
							v-for="item in waybillInfo"
						></u-steps-item>
					</u-steps>
				</view>
			</scroll-view>
			
			
			<!-- <view class="" style="margin-bottom: 20rpx;" v-for="item in waybillInfo">
				<view class="" style="font-size: 30rpx;padding-bottom: 10rpx 0;color: #000;">
					{{ item.action_time|dateFormat }}
				</view>
				<view class="" style="font-size: 26rpx;color: #666;">
					{{ item.action_msg }}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { queryFollowTrace } from '../../utils/api.js';
export default {
	data() {
		return {
			list: [
				{
					action_time: '10:30',
					action_msg: '已下单'
				},
				{
					action_time: '10:30',
					action_msg: '已下单'
				},
				{
					action_time: '10:30',
					action_msg: '已下单'
				}
			],
			orderId: '',
			deliveryName: '',
			waybillId: '',
			waybillInfo: [],
			templateConfig: uni.getStorageSync('templateConfig')
		};
	},
	onLoad(options) {
		this.orderId = options.orderId;
		console.log(this.orderId, 999);
	},
	filters: {
		//过滤器 用于格式化时间
		dateFormat: function (value) {
			var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			var month = ('0' + (date.getMonth() + 1)).slice(-2);
			var sdate = ('0' + date.getDate()).slice(-2);
			var hour = ('0' + date.getHours()).slice(-2);
			var minute = ('0' + date.getMinutes()).slice(-2);
			var second = ('0' + date.getSeconds()).slice(-2);
			// 拼接
			var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second;
			// 返回
			return result;
		}
	},
	onShow() {
		this.getQuery();
	},
	methods: {
		getQuery() {
			let data = {
				orderId: this.orderId
			};
			queryFollowTrace(data).then((res) => {
				if (res.code == 200) {
					this.deliveryName = res.body.delivery_info.delivery_name;
					this.waybillId = res.body.waybill_info.waybill_id;
					this.waybillInfo = res.body.waybill_info.path.path_action;
				}
			});
		},
		copy(text) {
			uni.setClipboardData({
				data: text,
				success: function () {
					console.log('success');
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: (error) => {
					console.log('失败', error);
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: url(https://oss.daccf.com/nz24iwd4izjuiy6tngha6/全部/a1cc230a-37af-4f4a-b505-ccf9f755201d.jpg);
	background-size:100% 100%;
	
}
.content {
	padding:33rpx  20rpx;
}
.box {
	background-color: #fff;
	padding:66rpx 40rpx;
	display: flex;
	align-items: center;
	// justify-content: space-between;
	border-bottom: 1rpx solid #f5f5f5;
	border-radius: 20rpx;
	.box-left{
		width: 130rpx;
		height: 130rpx;
		border-radius:35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		// background-color: red;
	}
	.box-right{
		flex: 1;
		height: 130rpx;
		display: flex;
		
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		// align-items: center;
		.box-right-one{
			display: flex;
			align-items: center;
			.left-one{
				font-size: 26rpx;
				width: 120rpx;
				font-weight:600;
			}
			.right-one{
				flex:1;
				font-size: 28rpx;
				font-weight:700;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.copy{
					width: 100rpx;
					height: 40rpx;
					border-radius: 20rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: red;
				}
			}
		}
	}
}
.box-content{
	margin-top:38rpx;
	padding: 20rpx ;
	background:#fff;
	border-radius:35rpx;
	.scrollPopup {
		// width: 600rpx;
		min-height: 214rpx;
		height: 66vh;
		.box-list {
			width: 100%;
			// overflow: hidden;
			// white-space: nowrap;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
}
.u-steps-itemt {
	padding-bottom: 10px !important;
}
</style>
